<template>
  <view>
    <view class="cu-modal" :class="modalName == 'Image' ? 'show' : ''" @tap="hideModal">
      <view class="cu-dialog" v-if="goods && erweimapath && haibaoShow" @tap="hideModal">
        <view class="bg-img">
          <!-- 自定义生成海报组件 -->
          <!-- @success：成功事件  imgSrc：图片地址 QrSrc：二维码图片地址  Title：标题 PriceTxt：价格 OriginalTxt：原始价格 LineType -->
          <cc-poster
            @success="posterSuccess"
            :imgSrc="goods.itempic"
            :QrSrc="erweimapath"
            :Title="goods.itemtitle"
            :PriceTxt="goods.itemendprice"
            :OriginalTxt="goods.itemprice"
            :Referrer="goods.Referrer"
            :LineType="true"
          ></cc-poster>
        </view>
      </view>
    </view>
  </view>
</template>
<script>
//高德SDK
export default {
  props: {
    goodsInfo: {
      Type: Object,
      default: {},
    },
  },
  data() {
    return {
      haibaoImg: null,
      modalName: '',
      haibaoShow: false,
      erweimapath: 'https://www.xinhuanet.com/politics/2016-07/19/5119875106653616178_11n.jpg',
      goods: {},
    }
  },

  onLoad() {},

  methods: {
    posterSuccess(haibaoImg) {
      this.haibaoImg = haibaoImg
      this.modalName = 'Image'
    },
    showModal() {
      if (!this.haibaoImg) {
        this.haibaoShow = true

        uni.showLoading({
          title: '海报生成中...',
        })
      } else {
        this.modalName = 'Image'
      }
    },
    hideModal() {
      this.modalName = null
    },
  },
  watch: {
    goodsInfo: {
      handler(val) {
        if (val) {
          this.erweimapath = val.erweimapath
          this.goods = { ...val }
          this.showModal()
        }
      },
      deep: true,
    },
  },
}
</script>
<style lang="scss">
.cu-modal {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1110;
  opacity: 0;
  outline: 0;
  text-align: center;
  -ms-transform: scale(1.185);
  transform: scale(1.185);
  backface-visibility: hidden;
  perspective: 2000upx;
  background: rgba(0, 0, 0, 0.6);
  transition: all 0.3s ease-in-out 0s;
  pointer-events: none;
}

.cu-modal::before {
  content: '\200B';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}

.cu-modal.show {
  opacity: 1;
  transition-duration: 0.3s;
  -ms-transform: scale(1);
  transform: scale(1);
  overflow-x: hidden;
  overflow-y: auto;
  pointer-events: auto;
}

.cu-dialog {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  margin-left: auto;
  margin-right: auto;
  width: 680upx;
  max-width: 100%;
  background-color: #f8f8f8;
  border-radius: 10upx;
  overflow: hidden;
}
</style>
